<template>
  <div class="box-flex">
    <div class="height-animation"></div>
    <el-form v-if="letlogin==1" :model="loginForm" :rules="rules1" ref="loginForm" class="login-container"
      label-position="left" label-width="0px">
      <!-- <img class="logo" src="../assets/logo.png" alt=""> -->
      <h3 class="login_title">登录</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" show-password>
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="login('loginForm')">登录
        </el-button>
      </el-form-item>
      <el-button type="text" size="mini" class="forgetpwd" @click='forget()'>忘记密码</el-button>
    </el-form>
    <!-- 忘记密码 -->
    <el-form v-if="letlogin==0" :model="forgetform" ref="forgetform" :rules="rules2" class="login-container"
      label-position="left" label-width="0px">
      <h3 class="login_title">重置密码</h3>
      <el-form-item prop='college'>
        <!-- <el-input type="text" v-model='forgetform.college' auto-complete="off" placeholder="学院"></el-input> -->
        <el-select v-model="forgetform.college" placeholder="请选择学院" style="width: 100%;" @change="getclass">
          <el-option v-for="item in collegelist" :key="item.instituteUuid" :label="item.instituteName"
            :value="item.instituteUuid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop='class'>
        <!-- <el-input type="text" v-model='forgetform.class' auto-complete="off" placeholder="班级"></el-input> -->
        <el-select v-model="forgetform.class" placeholder="请选择班级" style="width: 100%;" no-data-text='请先选择学院'>
          <el-option v-for="item in classlist" :key="item.instituteUuid" :label="item.className"
            :value="item.classUuid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item></el-form-item>
      <el-form-item prop='studentid'>
        <el-input type="text" v-model='forgetform.studentid' auto-complete="off" placeholder="学号"></el-input>
      </el-form-item>
      <el-form-item prop='name'>
        <el-input type="text" v-model='forgetform.name' auto-complete="off" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item prop='newpassword'>
        <el-input type="text" v-model='forgetform.newpassword' auto-complete="off" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none"
          @click="submitnewpwd('forgetform')">重置
        </el-button>
      </el-form-item>
      <el-button type="text" size="mini" class="forgetpwd" @click='forget()'>返回</el-button>
    </el-form>
    <h4 style="margin: 20px">--- 2022@ git bigdata application studio ---</h4>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      return {
        letlogin: 1,
        collegelist: [], //学院列表
        classlist: [],
        forgetform: {
          college: '',
          class: '',
          studentid: '',
          name: '',
          newpassword: '',
        },
        rules2: {
          college: [{
            required: true,
            message: '请选择学院',
            trigger: 'blur'
          }],
          class: [{
            required: true,
            message: '请选择班级',
            trigger: 'blur'
          }],
          studentid: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }, {
            pattern: /^-?\d+\.?\d*$/,
            message: '请正确输入学号',
            trigger: 'blur'
          }, {
            min: 10,
            max: 10,
            message: '学号长度应为10',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          newpassword: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }]
        },
        loginForm: {
          username: '',
          password: ''
        },
        rules1: {
          username: [{
            required: true,
            message: '学号不能为空',
            trigger: 'blur'
          }, {
            pattern: /^-?\d+\.?\d*$/,
            message: '请正确输入学号',
            trigger: 'blur'
          }, {
            min: 10,
            max: 10,
            message: '学号长度应为10',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }]
        },
        checked: true

      }
    },
    methods: {
      getclass(val) {
        // console.log(val)
        this.$postRequest({
          url: '/classInfo/getClass',
          params: {
            'instituteUUId': val
          }
        }).then(res => {
          // console.log(res)
          this.classlist = res.data
        })
      },
      forget() {
        this.letlogin = (this.letlogin + 1) % 2
        if (this.letlogin == 0) {
          this.getcollege()
        }
      },
      submitnewpwd(forgetform) {
        let data = {
          'classUUId': this.forgetform.class,
          'instituteUUId': this.forgetform.college,
          'newPwd': this.forgetform.newpassword,
          'studentId': this.forgetform.studentid,
          'studentName': this.forgetform.name
        };
        this.$refs[forgetform].validate((val) => {
          if (val) {
            this.$postRequest({
              url: '/studentInfo/reSetPwd',
              params: data
            }).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$alert('密码重置成功', '提示', {
                  confirmButtonText: '确定',
                  customClass: 'message_box_alert'
                }).then(() => {
                  this.forget();
                })
              } else {
                this.$alert(res.msg, '提示', {
                  confirmButtonText: '确定',
                  customClass: 'message_box_alert'
                })
              }
            })
          }
        })

      },
      getcollege() {
        this.$getRequest({
          url: '/instituteInfo/getInstituteList'
        }).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.collegelist = res.data
          }
        })
      },
      login(loginform) {
        var _this = this;
        let logindata = {
          'stuNo': this.loginForm.username,
          'pwd': this.loginForm.password
        };
        this.$refs[loginform].validate((valid) => {
          if (valid) {
            this.$postRequest({
                url: '/studentInfo/loginByStuPwd',
                params: logindata
              }).then(res => {
                if (res.code === 200) {
                  console.log(res)
                  _this.$store.commit('login', _this.loginForm)
                  let token = res.data.token;
                  // console.log(res)
                  _this.$store.state.usname = res.data.name
                  localStorage.setItem('token', token);
                  let changepwd = 0
                  if (this.loginForm.username == this.loginForm.password) {
                    changepwd = 1
                  }
                  _this.$store.state.changepwd=changepwd;
                  _this.$router.replace({
                    path: '/'
                  });
                } else {
                  this.$alert(res.msg, '提示', {
                    confirmButtonText: '确定',
                    customClass: 'message_box_alert'
                  })
                }
              })
              .catch(failResponse => {});
          } else {
            return false;
          }
        });
      }
    },
  }
</script>
<style>
  .message_box_alert {
    width: 80vw;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: auto;
    width: 70vw;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  @media screen and (min-width:800px) {
    .login-container {
      margin: 10% auto;
      width: 30vw;
    }
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .el-loading-spinner .path {
    stroke: #cbc4ec;
  }

  .login_remember {
    /* margin: 0px 0px 35px 0px; */
    text-align: left;
  }

  h4 {
    position: relative;
    bottom: 0px;
  }

  /*  .height-animation{
    transition: height 2s;
  } */
  .box-flex {
    background-color: #2f2f2f;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .forgetpwd {
    color: #2C3E50;
  }
</style>
